import React from 'react'
import ReactDOM from 'react-dom'
import { connect } from 'react-redux'
import 'styles/third-consumption/third-consumption.scss'

class BookConsumptionFrame extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      url: this.props.location.state.url,
      access_token: this.props.authToken.access_token,
      iFrameHeight: 'calc(100vh - 50px)'
    }
  }

  render(){
    let { access_token, url } = this.state;
    url = url + '&access_token=' + access_token;
    let hlyLanguage = window.localStorage.getItem('hly.language');

    let language = 'zh';
    if(hlyLanguage == '"en"'){
      language = 'en';
    }
    url = url + '&language=' + language;
    return (
      <div className="book-consumption-frame full-height-page">
        <iframe
          style={{width:'100%', minWidth: 1260, height:this.state.iFrameHeight, overflow:'visible'}}
          onLoad={() => {
            const obj = ReactDOM.findDOMNode(this);
            this.setState({
              "iFrameHeight":  obj.contentWindow.document.body.scrollHeight + 'px'
            });
          }}
          ref="iframe"
          sandbox="allow-scripts allow-forms allow-same-origin"
          src={url}
          width="100%"
          height={this.state.iFrameHeight}
          scrolling="no"
          frameBorder="0"
        />
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    user: state.login.user,
    company: state.login.company,
    authToken: state.main.authToken
  }
}

export default connect(mapStateToProps)(BookConsumptionFrame);
